<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.先引入vue.js-->
    <script src="../js/vue.js"></script>
    <!--2.引入elementui的js-->
    <script src="element-ui/lib/index.js"></script>
    <!--3.引入elemetentui样式的css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body{
            background-image: url("imgs/bj.jpg");
            background-repeat: no-repeat;
            background-size: 100% 720px;

        }
        #login_div{
            display: flex;/*开启弹性盒*/
            justify-content: center;/*主轴水平居中*/
            align-items: center;
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;

        }
        .login{
            width: 700px;
            height: 400px;
            background-color: rgba(17,15,11,0.5);
            box-shadow: 10px 10px 20px rgba(17,15,16,0.8);
            border-radius: 15px;
            /*margin: 100px auto;*/
            display: flex;
            justify-content: center;
            align-items: center;

        }

    </style>
</head>
<body>
<div id="login_div">
    <!--登录表单的容器-->
    <div class="login" v-loading="loading" element-loading-text="正在登录..." element-loading-spinner="el-icon-loading">
        <el-form :model="studentForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" >
            <el-form-item label="用户名" prop="username" style="width: 400px" >
                <el-input  v-model="studentForm.username" placeholder="请输入用户名..." ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="studentForm.password" placeholder="请输入用户名..." ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

</body>
</html>
<script>
    new Vue({
        el:'#login_div',
        data(){
            return{
                //表单验证规则
                rules:{
                    //prop属性:规则
                    username:[
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        {min:2,max:10,message:'用户名至少两个字符',trigger:'blur'},
                    ],//验证用户名
                    password:[
                        {required:true,message:'请输密码',trigger:'blur'},
                    ]//验证密码
                },

                // 表单数据
                studentForm: {
                     username:'',
                    passowrd:''
                },
                loading:false //加载
            }
        },
        methods:{
            submitForm(formName){
                //可以直接验证表单是否通过 通过提交  不通过不提交
                //根据ref获取沿着的表单
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        //验证通过
                        this.loading= true;
                        //发起请求进行提交
                        console.log('55')

                    }else{
                        //信息错误
                        return false;
                    }
                });

            },//登录提交
            resetForm(form){
                this.$refs[form].resetFields();
            }//重置

        }
    });
</script>